<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Rotating TH Headings 90deg</title>
<style type="text/css">
table      { width: 200px; margin: 30px auto;
             border-collapse: collapse; }
th, td     { border: 1px solid black; }
.normal    { height: 20px; width: 100px;
             font-size: 14px; }
.rotation  { height: 100px; width: 100px;          
             font-size: 16px;
             background: gray; /* need a color for filter */
             -moz-transform: rotate(40deg);
             -webkit-transform: rotate(40deg);
             -o-transform: rotate(40deg);
             -ms-transform: rotate(40deg);
             transform: rotate(40deg); 

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
        M11=1.5320888862379554, M12=-1.2855752193730787,
        M21=1.2855752193730796, M22=1.5320888862379558);
}
</style>

</head>
<body>

<table>
  <caption>Vertical Headings</caption>
  <tbody>
    <tr>
      <th class="rotation">text to rotate</th>
      <th class="rotation">text to rotate</th>
    </tr>
    <tr>
      <td class="normal"> not rotated </td>
      <td class="normal"> not rotated </td>
    </tr>
  </tbody>
</table>
</body>
</html>
